<template>
  <div class="battery-container">
    <el-form ref="ruleFormRef" :model="ruleForm" label-width="right" class="conditions-form">
      <el-form-item label="电池堆" prop="batteryStack">
        <el-select v-model="ruleForm.batteryStack" placeholder="请选择电池堆" clearable>
          <el-option v-for="item in batteryStackOptions" :key="item.value" :label="item.label"
            :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="电池簇" prop="batteryCluster">
        <el-select v-model="ruleForm.batteryCluster" placeholder="请选择电池簇" clearable>
          <el-option v-for="item in batteryClusterOptions" :key="item.value" :label="item.label"
            :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="resetForm(ruleFormRef)">重置</el-button>
        <el-button type="primary" @click="submitForm(ruleFormRef)">
          查询
        </el-button>
      </el-form-item>
      <el-form-item label="" prop="alarmType">
        <el-radio-group v-model="ruleForm.type">
          <el-radio-button label="1">分布图</el-radio-button>
          <el-radio-button label="2">表格</el-radio-button>
          <el-radio-button label="3">柱状图</el-radio-button>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <div class="cont">
      <div class="conditions">
        <el-radio-group v-model="ruleForm.dataType">
          <el-radio-button label="1">电压/V</el-radio-button>
          <el-radio-button label="2">摄氏度/°C</el-radio-button>
          <el-radio-button label="3">SOC/%</el-radio-button>
          <el-radio-button label="4">SOH/%</el-radio-button>
        </el-radio-group>
        <p class="highest">最高单体变换：12,34,11</p>
        <p class="lowest">最低单体变换：12,34,11</p>
      </div>
      <div class="scattergramCont" v-if="ruleForm.type === '1'">
        <div class="item" v-for="(item, index) in batteyuData" :key="index">
          <p class="value">{{ switchValue(ruleForm.dataType, item) }}</p>
          <p class="num">{{ item.num }}</p>
        </div>
      </div>
      <div class="tableCont" v-else-if="ruleForm.type === '2'">
        <el-table :data="batteyuData" border stripe>
          <el-table-column prop="num" label="电池单体" align="center" sortable></el-table-column>
          <el-table-column prop="voltage" label="电压/V" align="center" sortable></el-table-column>
          <el-table-column prop="temperature" label="温度/°C" align="center" sortable></el-table-column>
          <el-table-column prop="soc" label="SOC/%" align="center" sortable></el-table-column>
          <el-table-column prop="soh" label="SOH/%" align="center" sortable></el-table-column>
        </el-table>
        <Pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :total="total"
          @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </div>
      <div class="barCont" v-else>
        <ECharts :option="powerCurveOptions" />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, computed, watch } from 'vue';
import Pagination from '@/components/Pagination.vue'
import ECharts from '@/components/ECharts.vue';

const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(100)

const handleSizeChange = (val: number) => {
  pageSize.value = val
}

const handleCurrentChange = (val: number) => {
  currentPage.value = val
}
const switchValue = (type: string, item: any) => {
  switch (type) {
    case '1':
      return item.voltage;
    case '2':
      return item.temperature;
    case '3':
      return item.soc;
    case '4':
      return item.soh;
    default:
      return '';
  }
};

const batteyuData = ref([
  { num: '1#', voltage: '3.6', soc: '75', soh: '85', temperature: '26', status: '正常' },
  { num: '2#', voltage: '3.8', soc: '78', soh: '88', temperature: '24', status: '正常' },
  { num: '3#', voltage: '3.5', soc: '72', soh: '80', temperature: '27', status: '正常' },
  { num: '4#', voltage: '3.7', soc: '76', soh: '87', temperature: '25', status: '正常' },
  { num: '5#', voltage: '3.9', soc: '79', soh: '90', temperature: '23', status: '正常' },
  { num: '6#', voltage: '3.4', soc: '71', soh: '79', temperature: '28', status: '正常' },
  { num: '7#', voltage: '3.6', soc: '74', soh: '84', temperature: '26', status: '正常' },
  { num: '8#', voltage: '3.8', soc: '77', soh: '89', temperature: '24', status: '正常' },
  { num: '9#', voltage: '3.5', soc: '73', soh: '82', temperature: '27', status: '正常' },
  { num: '10#', voltage: '3.7', soc: '75', soh: '86', temperature: '25', status: '正常' },
  { num: '11#', voltage: '3.9', soc: '78', soh: '89', temperature: '23', status: '正常' },
  { num: '12#', voltage: '3.4', soc: '70', soh: '78', temperature: '28', status: '正常' },
  { num: '1#', voltage: '3.6', soc: '75', soh: '85', temperature: '26', status: '正常' },
  { num: '2#', voltage: '3.8', soc: '78', soh: '88', temperature: '24', status: '正常' },
  { num: '3#', voltage: '3.5', soc: '72', soh: '80', temperature: '27', status: '正常' },
  { num: '4#', voltage: '3.7', soc: '76', soh: '87', temperature: '25', status: '正常' },
  { num: '5#', voltage: '3.9', soc: '79', soh: '90', temperature: '23', status: '正常' },
  { num: '6#', voltage: '3.4', soc: '71', soh: '79', temperature: '28', status: '正常' },
  { num: '7#', voltage: '3.6', soc: '74', soh: '84', temperature: '26', status: '正常' },
  { num: '8#', voltage: '3.8', soc: '77', soh: '89', temperature: '24', status: '正常' },
  { num: '9#', voltage: '3.5', soc: '73', soh: '82', temperature: '27', status: '正常' },
  { num: '10#', voltage: '3.7', soc: '75', soh: '86', temperature: '25', status: '正常' },
  { num: '11#', voltage: '3.9', soc: '78', soh: '89', temperature: '23', status: '正常' },
  { num: '12#', voltage: '3.4', soc: '70', soh: '78', temperature: '28', status: '正常' }
]);

// 根据 dataType 获取显示单位
const getUnit = (type: string) => {
  switch (type) {
    case '1': return 'V';
    case '2': return '°C';
    case '3': return '%';
    case '4': return '%';
    default: return '';
  }
};

// 根据 dataType 获取指标名称
const getMetricName = (type: string) => {
  switch (type) {
    case '1': return '电压';
    case '2': return '温度';
    case '3': return 'SOC';
    case '4': return 'SOH';
    default: return '';
  }
};

// 根据 dataType 获取对应的数据列
const getDataByType = (type: string) => {
  switch (type) {
    case '1': return batteyuData.value.map(item => parseFloat(item.voltage));
    case '2': return batteyuData.value.map(item => parseFloat(item.temperature));
    case '3': return batteyuData.value.map(item => parseFloat(item.soc));
    case '4': return batteyuData.value.map(item => parseFloat(item.soh));
    default: return [];
  }
};

// 获取所有电池单体编号
const getBatteryLabels = () => {
  return batteyuData.value.map(item => item.num);
};

// 创建动态图表选项
const powerCurveOptions = computed(() => {
  const dataType = ruleForm.value.dataType;
  const metricName = getMetricName(dataType);
  const unit = getUnit(dataType);
  const currentDate = new Date().toISOString().split('T')[0];
  
  // 根据dataType获取显示的标题
  const displayName = (() => {
    switch (dataType) {
      case '1': return '电压/V';
      case '2': return '摄氏度/°C';
      case '3': return 'SOC/%';
      case '4': return 'SOH/%';
      default: return '';
    }
  })();
  
  return {
    grid: {
      left: '2%',
      right: '5%',
      top: '12%',
      bottom: '13%'
    },
    tooltip: {
      trigger: 'axis',
      formatter: function(params: any) {
        return `${params[0].name}: ${params[0].value}${unit}`;
      }
    },
    legend: {
      data: [displayName],
      top: '1%',
    },
    xAxis: {
      type: 'category',
      data: getBatteryLabels(),
      axisLabel: {
        interval: 0,
        rotate: 45
      }
    },
    yAxis: {
      type: 'value',
      name: `${metricName}/${unit}`,
      nameTextStyle: {
        padding: [0, 0, 0, 40]
      }
    },
    series: [
      {
        name: displayName,
        type: 'bar',
        data: getDataByType(dataType),
      }
    ]
  };
});

// 定义表单数据模型
const ruleFormRef = ref();
const ruleForm = ref({
  batteryStack: '',
  batteryCluster: '',
  type: '1',
  dataType: '1'
});

// 电池堆选项
const batteryStackOptions = ref([
  { label: '电池堆1', value: 'stack1' },
  { label: '电池堆2', value: 'stack2' },
  { label: '电池堆3', value: 'stack3' }
]);

// 电池簇选项
const batteryClusterOptions = ref([
  { label: '电池簇1', value: 'cluster1' },
  { label: '电池簇2', value: 'cluster2' },
  { label: '电池簇3', value: 'cluster3' }
]);

// 重置表单
const resetForm = (formEl: any) => {
  if (!formEl) return;
  formEl.resetFields();
};

// 提交表单
const submitForm = (formEl: any) => {
  if (!formEl) return;
  formEl.validate((valid: boolean) => {
    if (valid) {
      console.log('提交查询', ruleForm.value);
      // 这里添加查询逻辑
    }
  });
};

onMounted(() => {
  // 可以在这里加载电池堆和电池簇的数据
});
</script>

<style lang="scss" scoped>
.battery-container {

  // padding: 0.2rem;
  .cont {
    padding: 0.12rem 0.24rem;
    background: #fff;

    :deep(.conditions) {
      display: flex;
      align-items: center;
      padding-bottom: 0.12rem;

      .el-radio-button__inner {
        height: 0.4rem;
        line-height: 0.4rem;
        padding: 0 0.15rem;
      }

      .highest {
        height: 0.4rem;
        line-height: 0.4rem;
        padding: 0 0.16rem;
        background: #FED2BA;
        border: 1px solid #FDA675;
        border-radius: 4px;
        box-sizing: border-box;
        margin-left: 0.4rem;
        margin-right: 0.08rem;
      }

      .lowest {
        height: 0.4rem;
        line-height: 0.4rem;
        padding: 0 0.16rem;
        background: #F3D2D6;
        border: 1px solid #E7A5AC;
        border-radius: 4px;
        box-sizing: border-box;
      }
    }

    .scattergramCont {
      display: grid;
      grid-template-columns: repeat(18, 0.84rem);
      justify-content: space-between;

      .item {
        width: 0.84rem;
        height: 0.8rem;
        background: #F2F3F5;
        border: 1px solid #E5E6EA;
        box-sizing: border-box;
        border-radius: 0.04rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-bottom: 0.08rem;

        .value {
          font-weight: bold;
          margin-bottom: 0.05rem;
          color: #046AF9;
          font-size: 0.24rem;
          line-height: 1;
        }

        .num {
          color: #1D2129;
          font-size: 0.16rem;
        }
      }
    }

    .barCont {
      width: 100%;
      height: 8.7rem;
    }
  }
}
</style>
